<!-- 账号密码登录页 -->
<template>
	<view class="uni-content">
		<view class="login-logo">
			<image class="img-100" :src="logo"></image>
		</view>
		<view class="font-18 col-000-8 text-center" style="margin-top: 48rpx;">
			SandArt Controller
		</view>
		<uni-forms style="margin-top: 10%;">
			<uni-forms-item name="username">
				<uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box"
					:inputBorder="false" v-model="username" :placeholder="$t('pwdLogin.placeholder')" trim="all" />
			</uni-forms-item>
			<uni-forms-item name="password">
					<uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable
					               type="password" :inputBorder="false" v-model="password" :placeholder="$t('pwdLogin.passwordPlaceholder')" trim="all" />
			</uni-forms-item>
		</uni-forms>
		<uni-captcha v-if="needCaptcha" focus ref="captcha" scene="login-by-pwd" v-model="captcha" />
		<!-- 带选择框的隐私政策协议组件 -->
		<!-- <uni-id-pages-agreements scope="login" ref="agreements"></uni-id-pages-agreements> -->
		<!-- 登录 -->
		<view class="link" v-if="!config.isAdmin" @click="toRetrievePwd">
			<!-- 找回密码 -->
			{{$t('pwdLogin.forgetPassword')}}
		</view>
		<button class="uni-btn" type="primary" @click="pwdLogin">{{$t('pwdLogin.login')}}</button>
		<!-- <view class="line-box">
			<view class="line line-left"></view>
			<view class="line line-right"></view>
			<view class="line-w font-12 col-000-4">{{$t('pwdLogin.OtherLoginOptions')}}</view>
		</view> -->
		<!-- 悬浮登录方式组件 -->
		<!-- <uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login> -->
		<view class="flex-center-center" @click="toRegister">
			<view class="no-account col-000-4 font-14">{{$t('pwdLogin.Noaccountyet')}}</view>
			<view class="link-r col-000-8 font-14">
				{{config.isAdmin ? '注册管理员账号': $t('pwdLogin.register')}}
			</view>
		</view>
	</view>
</template>

<script>
	import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
	const uniIdCo = uniCloud.importObject("uni-id-co", {
		errorOptions: {
			type: 'toast'
		}
	})
	export default {
		mixins: [mixin],
		data() {
			return {
				"password": "",
				"username": "",
				"captcha": "",
				"needCaptcha": false,
				"focusUsername": false,
				"focusPassword": false,
				"logo": "/static/images/login-img.png"
			}
		},
		onShow() {
			// #ifdef H5
			document.onkeydown = event => {
				var e = event || window.event;
				if (e && e.keyCode == 13) { //回车键的键值为13
					this.pwdLogin()
				}
			};
			// #endif
		},
		methods: {
			// 页面跳转，找回密码
			toRetrievePwd() {
				let url = '/uni_modules/uni-id-pages/pages/retrieve/retrieve-by-email'
				// 如果用户名是邮箱格式，传递到 retrieve-by-email 页面
				if (/@/.test(this.username)) {
					url += `?emailNumber=${this.username}`
				}
				uni.navigateTo({
					url
				})
			},
			/**
			 * 密码登录
			 */
			pwdLogin() {
				if (!this.password.length) {
					this.focusPassword = true
					return uni.showToast({
						// title: '请输入密码',
						title: this.$t('pwdLogin.passwordPlaceholder'),
						icon: 'none',
						duration: 3000
					});
				}
				if (!this.username.length) {
					this.focusUsername = true
					return uni.showToast({
						// title: '请输入手机号/用户名/邮箱',
						title: this.$t('pwdLogin.placeholder'),
						icon: 'none',
						duration: 3000
					});
				}
				if (this.needCaptcha && this.captcha.length != 4) {
					this.$refs.captcha.getImageCaptcha()
					return uni.showToast({
						// title: '请输入验证码',
						title: this.$t('pwdLogin.verifyCodePlaceholder'),
						icon: 'none',
						duration: 3000
					});
				}

				if (this.needAgreements && !this.agree) {
					return this.$refs.agreements.popup(this.pwdLogin)
				}

				let data = {
					"password": this.password,
					"captcha": this.captcha
				}

				if (/^1\d{10}$/.test(this.username)) {
					data.mobile = this.username
				} else if (/@/.test(this.username)) {
					data.email = this.username
				} else {
					data.username = this.username
				}

				uniIdCo.login(data).then(e => {
					this.loginSuccess(e)
				}).catch(e => {
					if (e.errCode == 'uni-id-captcha-required') {
						this.needCaptcha = true
					} else if (this.needCaptcha) {
						//登录失败，自动重新获取验证码
						this.$refs.captcha.getImageCaptcha()
					}
				})
			},
			/* 前往注册 */
			toRegister() {
				uni.navigateTo({
					url: this.config.isAdmin ? '/uni_modules/uni-id-pages/pages/register/register-admin' :
						'/uni_modules/uni-id-pages/pages/register/register-by-email',
					fail(e) {
						console.error(e);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni_modules/uni-id-pages/common/login-page.scss";

	@media screen and (min-width: 690px) {
		.uni-content {
			height: auto;
		}
	}
	.uni-content {
		// height: 100%;
		height: 100vh;
		background-image: url("/static/images/login-bg.png");
		background-size: 100% 100%;
	}
	.forget {
		font-size: 12px;
		color: #8a8f8b;
	}

	.link-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
	}

	.link {
		font-size: 12px;
	}
	.input-box {
		border-radius: 16rpx;
		border: 2px solid rgba(0,0,0,0.8);
	}
</style>
